<template>
  <div>
    <el-form :inline="true"  >
    <span class="demonstration">从&ensp;</span>
    <el-date-picker
      v-model="fromtime"
      type="datetime"
      placeholder="时间"
      >
    </el-date-picker>
    <span class="demonstration">&ensp;到&ensp;</span>
    <el-date-picker
      v-model="totime"
      type="datetime"
      placeholder="时间"
      >
    </el-date-picker>
 
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
    <el-table
      :data="list"
       v-loading="loading"
      border
     
      style="width: 100%">
      <el-table-column label="玩家"  >
         <template #default="scope">
          <div  v-for="pn in pl" :key="pn">
          <div style="display:inline-block;width:100%;" v-if="scope.row[pn['p']] && users[scope.row[pn['p']]]">
            <el-row >
            <el-col :span="6">
              <el-image style="max-width:50px;max-height:50px;" :src="users[scope.row[pn['p']]].avatar"></el-image>
            </el-col>
            <el-col :span="18">
              <div>{{users[scope.row[pn['p']]].nickname}}</div>
              <div>豆子：{{users[scope.row[pn['p']]].score}} 方位：{{pn['pos']}}</div>
            </el-col>
            </el-row> 
            <div style="position:relative;height:150px;">
              <poker  v-for="(p,i) in scope.row[pn['po']].split('|')"  :key="p" :type="p.split('*')[0]" :number="p.split('*')[1]" :style="{top:0,position:'absolute',left:i * 30 +'px'}" />
            </div>
          </div>
          </div>
          <el-divider></el-divider>
         </template>
      </el-table-column>
     
      <el-table-column
        label="游戏开始时间">
       <template #default="scope" >
           <div>
            {{$g.time2date(scope.row.time,'yyyy-m-d h:i:s')}}
          </div>
          </template>
          </el-table-column>
    <el-table-column
      fixed="right"
      label="游戏流水"
      width="100">
      <template #default="scope">
        <el-button @click="gameDetail(scope.row.gameid)" type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
    background
   
    @current-change="handleCurrentChange"
  
    :page-size="pagesize"
    :total="total">
  </el-pagination>
  <el-drawer
  destroy-on-close="true"
  v-model="detailshow"
  with-header="false"
  modal-class="xxxx"
  >
   <actions :list="details" :users="users" />
</el-drawer>
 
  </div>
</template>

<script>
import post from "@/post"
import poker from "@/components/poker"
import actions from "@/views/actions"
export default {
  components:{
    poker,
    actions
  },
  data(){
    return {
      pl :[
        {
          p :'playere',
          po: 'pokerse',
          pos : "东"
        },
        {
          p :'players',
          po: 'pokerss',
          pos : "南"
        },
        {
          p :'playerw',
          po: 'pokersw',
          pos : "西"
        },
        {
          p :'playern',
          po: 'pokersn',
          pos : "北"
        }
      ],
      list :[],
      total:0,
      page : 1,
      url:'',
      pagesize:10,
      users: {},
      detailshow:false,
      details:[],
      loading:false,
      fromtime:'',
      totime : ''
    }
  },
  mounted(){
    this.getList()
  },

  methods:{
    getList(){
      this.loading=true
      post("/game",{page:this.page,url:this.url,fromtime:this.fromtime,totime:this.totime}).then(d=>{
        this.total = d.total
        this.pagesize = d.pagesize
        this.pageall = d.pageall
        this.now = d.now
        this.list = d.list
  
        var users = {}
        d.users.forEach(v => {
          users[v['mtoken']] = v
        })
        this.users = users
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })
    },
   handleCurrentChange(d){
     this.page = d
     this.getList()
   },
   onSubmit(){
     this.page = 1
     this.getList()

   },
   gameDetail(gameid){
     
     post('gamedetail',{gameid:gameid}).then(d=>{
       this.details = d.list
       this.detailshow = true
       
     })
   }
   
   
  }
}
</script>

<style scoped>

</style>

